<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学生信息管理系统</title>
<style>
  body {
    font-family: Arial, sans-serif;
  }
  table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #f2f2f2;
  }
  tr:nth-child(even) {
    background-color: #f9f9f9;
  }
  tr:hover {
    background-color: #f1f1f1;
  }
  .form-group {
    margin-bottom: 15px;
  }
  label {
    display: block;
    margin-bottom: 5px;
  }
  input, select {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    box-sizing: border-box;
  }
  button {
    padding: 10px 15px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
  }
  button:hover {
    background-color: #45a049;
  }
</style>
</head>
<body>

<h2>学生信息管理系统</h2>

<!-- 学生信息表单 -->
<h3>添加/编辑学生信息</h3>
<div id="studentFormContainer">
  <form id="studentForm">
    <div class="form-group">
      <label for="studentId">学号:</label>
      <input type="text" id="studentId" name="studentId" required>
    </div>
    <div class="form-group">
      <label for="name">姓名:</label>
      <input type="text" id="name" name="name" required>
    </div>
    <div class="form-group">
      <label for="gender">性别:</label>
      <select id="gender" name="gender">
        <option value="male">男</option>
        <option value="female">女</option>
      </select>
    </div>
    <div class="form-group">
      <label for="dob">出生日期:</label>
      <input type="date" id="dob" name="dob" required>
    </div>
    <div class="form-group">
      <label for="email">邮箱:</label>
      <input type="email" id="email" name="email" required>
    </div>
    <button type="submit">提交</button>
  </form>
</div>

<!-- 学生信息表格 -->
<h3>学生信息列表</h3>
<table id="studentTable">
  <thead>
    <tr>
      <th>学号</th>
      <th>姓名</th>
      <th>性别</th>
      <th>出生日期</th>
      <th>邮箱</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <!-- 学生信息行将通过JavaScript动态添加 -->
  </tbody>
</table>

<script>
// 模拟的学生数据
const students = [
  { id: 1, name: '张三', gender: '男', dob: '2000-01-01', email: 'zhangsan@example.com' },
  { id: 2, name: '李四', gender: '女', dob: '2001-02-02', email: 'lisi@example.com' }
];

// 获取表格的tbody元素
const tbody = document.getElementById('studentTable').getElementsByTagName('tbody')[0];

// 填充表格
students.forEach(student => {
  const row = tbody.insertRow();
  row.insertCell(0).textContent = student.id;
  row.insertCell(1).textContent = student.name;
  row.insertCell(2).textContent = student.gender;
  row.insertCell(3).textContent = student.dob;
  row.insertCell(4).textContent = student.email;
  const actionsCell = row.insertCell(5);
  const editButton = document.createElement('button');
  editButton.textContent = '编辑';
  editButton.onclick = () => {
    // 这里可以添加编辑逻辑
    alert('编辑功能尚未实现');
  };
  actionsCell.appendChild(editButton);
});

// 处理表单提交
document.getElementById('studentForm').addEventListener('submit', function(event) {
  event.preventDefault();
  const formData = new FormData(this);
  const student = {
    id: students.length + 1,
    name: formData.get('name'),
    gender: formData.get('gender'),
    dob: formData.get('dob'),
    email: formData.get('email')
  };
  students.push(student);
  tbody.innerHTML = ''; // 清空表格
  students.forEach(s => {
    const row = tbody.insertRow();
    row.insertCell(0).textContent = s.id;
    row.insertCell(1).textContent = s.name;
    row.insertCell(2).textContent = s.gender;
    row.insertCell(3).textContent = s.dob;
    row.insertCell(4).textContent = s.email;
    const actionsCell = row.insertCell(5);
    const editButton = document.createElement('button');
    editButton.textContent = '编辑';
    editButton.onclick = () => {
      // 这里可以添加编辑逻辑
      alert('编辑功能尚未实现');
    };
    actionsCell.appendChild(editButton);
  });
});
</script>
<script>

// 处理表单提交
document.getElementById('studentForm').addEventListener('submit', function(event) {
  event.preventDefault();
  const formData = new FormData(this);
  const student = {
    id: formData.get('studentId'),
    name: formData.get('name'),
    gender: formData.get('gender'),
    dob: formData.get('dob'),
    email: formData.get('email')
  };

  // 检查是否是新学生（id为空）或编辑现有学生
  if (!student.id) {
    fetch('http://localhost:3000/students', {
      method: 'POST',
      body: JSON.stringify(student),
      headers: {
        'Content-Type': 'application/json'
      }
    })
    .then(response => response.json())
    .then(data => {
      // 添加新学生后，重新加载学生列表
      loadStudents();
    })
    .catch(error => console.error('Error:', error));
  } else {
    fetch(`http://localhost:3000/students/${student.id}`, {
      method: 'PUT',
      body: JSON.stringify(student),
      headers: {
        'Content-Type': 'application/json'
      }
    })
    .then(response => response.json())
    .then(data => {
      // 更新学生信息后，重新加载学生列表
      loadStudents();
    })
    .catch(error => console.error('Error:', error));
  }
});

// 删除学生
function deleteStudent(id) {
  fetch(`http://localhost:3000/students/${id}`, {
    method: 'DELETE'
  })
  .then(() => {
    // 删除学生后，重新加载学生列表
    loadStudents();
  })
  .catch(error => console.error('Error:', error));
}

// 加载学生列表
function loadStudents() {
  fetch('http://localhost:3000/students')
  .then(response => response.json())
  .then(students => {
    const tbody = document.getElementById('studentTable').getElementsByTagName('tbody')[0];
    tbody.innerHTML = ''; // 清空表格
    students.forEach(student => {
      const row = tbody.insertRow();
      // ... 添加单元格的代码 ...
      const actionsCell = row.insertCell(5);
      const editButton = document.createElement('button');
      editButton.textContent = '编辑';
      editButton.onclick = () => {
        // 填充表单字段以编辑现有学生信息
        // ... 填充表单的代码 ...
      };
      const deleteButton = document.createElement('button');
      deleteButton.textContent = '删除';
      deleteButton.onclick = () => {
        deleteStudent(student.id);
      };
      actionsCell.appendChild(editButton);
      actionsCell.appendChild(deleteButton);
    });
  });
}

// 页面加载时初始化学生列表
window.onload = loadStudents;
</script>
</body>
</html>